<template>
  <div class="service_online">
    <van-nav-bar
      title="在线办事"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <van-search
      v-model="form.serviceName"
      placeholder="请输入搜索关键词"
      show-action
      shape="round"
    >
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>
    <ul class="menu_list">
      <li
        v-for="item in serviceList"
        :key="item.id"
        @click="menuClick(item)"
      >
        <span class="left_text">{{ item.serviceName }}</span>
        <span class="right_icon">
          <van-icon name="arrow" size="24px" color="#999999" />
        </span>
      </li>
    </ul>
    <van-popup v-model="showLoading">
      <van-loading color="#DC4630" />
    </van-popup>
  </div>
</template>

<script>
import api from "@/controller/govService.js";
import constant from "@/controller/constant.js";
export default {
  data() {
    return {
      showLoading: false,
      form: {
        communityId: null,
        serviceName: ''
      },
      serviceList: []
    };
  },
  mounted() {
    this.form.communityId = JSON.parse(localStorage.getItem('userInfo')).jiedaoId
    this.getServiceList()
  },
  methods: {
    getServiceList() {
      this.showLoading = true
      api.service_category_v1_list(this.form).then(res => {
        if (res.code === "0") {
          this.serviceList = res.datas;
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      }).catch(() => {})
        .then(() => {
          this.showLoading = false;
        });
    },
    onSearch() {
      this.getServiceList()
    },
    menuClick(item) {
      this.$router.push({ name: "serviceName", query: item });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../styles/workstation.scss";
.service_online {
  background: #ffffff;
  height: 100%;
  .select_info {
    padding: 0 0 10px 15px;
    border-bottom: 1px solid rgba(226, 226, 226, 0.5);
    font-size: 14px;
    line-height: 20px;
    color: #333333;

    span {
      font-size: 14px;
      color: #333333;
      margin-right: 7px;
    }
  }
  .menu_list {
    margin: 0 15px;
    li {
      padding: 14.75px 0;
      border-bottom: 1px solid rgba(226, 226, 226, 0.5);
      .right_icon {
        float: right;
      }
      .left_text {
        font-size: 14px;
        line-height: 20px;
        color: #333333;
      }
    }
  }
}
</style>
